import React, { Component } from 'react';
import { connect } from 'dva';
import { Row,Col,Modal,Table,Button } from 'antd';
import styles from './Analysis.less';
import ExportJsonExcel from 'js-export-excel';//导出
/* eslint react/no-danger:0 */
@connect(({ statisticchart, loading }) => ({
  statisticchart,
  loading: loading.effects['statisticchart/fetch'],
}))
class PoliceStaticList extends Component {
  state = {
    modalByStaffBaseInfo: false,
    title: null,
    tableListDataByStaffBaseInfo: [
			{name:"阳泰顺", sex:"女", nation:"汉族", politics_face:"中共党员", person_type:"机关工勤人员", post_type:"综合管理警官"},
			{name:"鲍翰东", sex:"男", nation:"蒙古族", politics_face:"预备党员", person_type:"企业工勤人员", post_type:"综合管理警员"},
			{name:"姜成发", sex:"男", nation:"回族", politics_face:"中共党员", person_type:"企业管理人员", post_type:"执法勤务警官"},
			{name:"谷军", sex:"男", nation:"满族", politics_face:"民进", person_type:"机关工勤人员", post_type:"执法勤务警员"},
			{name:"宋宜仪", sex:"女", nation:"维吾尔族", politics_face:"农工党", person_type:"专业技术类", post_type:"警务技术警官"},
			{name:"王成", sex:"男", nation:"藏族", politics_face:"群众", person_type:"专业技术类", post_type:"警务技术警员"},
		],
    tableListDataByPoliceStaticDetail: [
        {name:"阳泰顺", sex:"女", nation:"汉族", politics_face:"中共党员", person_type:"机关工勤人员", post_type:"综合管理警官",police_rank:"二级警督"},
        {name:"鲍翰东", sex:"男", nation:"蒙古族", politics_face:"预备党员", person_type:"企业工勤人员", post_type:"综合管理警员",police_rank:"二级警督"},
        {name:"姜成发", sex:"男", nation:"回族", politics_face:"中共党员", person_type:"企业管理人员", post_type:"执法勤务警官",police_rank:"二级警督"},
        {name:"谷军", sex:"男", nation:"满族", politics_face:"民进", person_type:"机关工勤人员", post_type:"执法勤务警员",police_rank:"二级警督"},
        {name:"宋宜仪", sex:"女", nation:"维吾尔族", politics_face:"农工党", person_type:"专业技术类", post_type:"警务技术警官",police_rank:"二级警督"},
    ]
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'statisticchart/get_policestatic_list',
    });
  }


  columnsByStaffTotal = [
        {
          title: '序号',
          dataIndex: 'ordernum',
          key: 'ordernum',
        },
  			{
          title: '单位',
          dataIndex: 'unit',
          key: 'unit',
        },  {
          title: '申报',
          dataIndex: 'report',
          key: 'report',
          render: (text, record) => {
              return (
                  <span onClick={()=>this.handleDetail('审报详情列表')} className={styles.policeStaticListStyle}>{record.report}</span>
              );
          }
        }, {
          title: '审核',
          dataIndex: 'check',
          key: 'check',
          render: (text, record) => {
              return (
                  <span onClick={()=>this.handleDetail('审核详情列表')} className={styles.policeStaticListStyle}>{record.check}</span>
              );
          }
        }, {
          title: '审批',
          dataIndex: 'approve',
          key: 'approve',
          render: (text, record) => {
              return (
                  <span onClick={()=>this.handleDetail('审批详情列表')} className={styles.policeStaticListStyle}>{record.approve}</span>
              );
          }
        }
  ];

  columnsByStaffBaseInfo = [
				{
	        title: '姓名',
	        dataIndex: 'name',
	        key: 'name',
        },  {
	        title: '性别',
	        dataIndex: 'sex',
	        key: 'sex',
        }, 	{
	        title: '民族',
	        dataIndex: 'nation',
	        key: 'nation',
        },  {
	        title: '警衔',
	        dataIndex: 'police_rank',
	        key: 'police_rank',
        },  {
	        title: '政治面貌',
	        dataIndex: 'politics_face',
	        key: 'politics_face',
        },  {
	        title: '职务类别',
	        dataIndex: 'post_type',
	        key: 'post_type',
        }
	];

  //导出excel
  downloadExl = () => {
      const { tableListDataByPoliceStaticDetail } = this.state;
    	var option={};
      var dataTable = [];
      	for(let i=0;i < tableListDataByPoliceStaticDetail.length;i++) {
  	        	let obj = {
  		          '姓名': tableListDataByPoliceStaticDetail[i].name,
  		          '性别': tableListDataByPoliceStaticDetail[i].sex,
  		          '民族': tableListDataByPoliceStaticDetail[i].nation,
  		          '警衔': tableListDataByPoliceStaticDetail[i].police_rank,
  		          '政治面貌': tableListDataByPoliceStaticDetail[i].politics_face,
                '职务类别': tableListDataByPoliceStaticDetail[i].post_type,
  		        }
          		dataTable.push(obj);
        }

  	  option.fileName = '人员统计信息';
  	  option.datas=[
  	    {
  	      sheetData:dataTable,
  	      sheetName:'人员统计信息',
  	      sheetHeader:['姓名','性别','民族','警衔','政治面貌','职务类别'],
  	      columnWidths: [10,10,10,10,10,10],
  	      columnHeights: [10,10,10,10,10,10]
  	    }
  	  ];

  	  var toExcel = new ExportJsonExcel(option);
  	  toExcel.saveExcel();
  }

  //人员信息弹窗
	handleModalByStaffBaseInfo = flag => {
		this.setState({
			modalByStaffBaseInfo: !!flag,
		});
	};

  handleDetail = (title) => {
    const { handleStaffModalVisible,dispatch,values } = this.props;
    const { tableListDataByPoliceStaticDetail } = this.state;
    handleStaffModalVisible();
    dispatch({
      type: 'statisticchart/get_policestatic_detail',
    });
    this.handleModalByStaffBaseInfo(true)

    if(tableListDataByPoliceStaticDetail) {  
    	tableListDataByPoliceStaticDetail.map((val,index)=> {
    		val.police_rank = values;
    		this.setState({
    			tableListDataByPoliceStaticDetail: [...tableListDataByPoliceStaticDetail],
          title
    		})
    	})
    }

  }

  render() {
    const {
      statisticchart: {
      	policeStaticListData,
        policeStaticDetailData
      },
      modalStaffVisible,
      handleStaffModalVisible,
      values
      } = this.props;
    const { modalByStaffBaseInfo,tableListDataByStaffBaseInfo,tableListDataByStaffTotal,title,tableListDataByPoliceStaticDetail } = this.state;
    return (
    <div>
     	<Modal
			width={800}
			centered
			destroyOnClose
			title={title}
			visible={modalByStaffBaseInfo}
			onOk={()=> this.handleModalByStaffBaseInfo()}
			onCancel={()=> this.handleModalByStaffBaseInfo()}
			>
      <Button type="primary" icon="download" onClick={this.downloadExl} style={{float: 'right',zIndex: 1000,marginBottom: '10px',marginTop: '-14px'}}>
      导出
      </Button>
			<Table  columns={this.columnsByStaffBaseInfo} dataSource={tableListDataByPoliceStaticDetail?tableListDataByPoliceStaticDetail: []}/>
		</Modal>
    <Modal
    	width={800}
    	centered
    	destroyOnClose
    	title="警衔统计表"
    	visible={modalStaffVisible}
    	onOk={()=> handleStaffModalVisible()}
    	onCancel={()=> handleStaffModalVisible()}
    	>
    	<Table
        columns={this.columnsByStaffTotal}
        dataSource={policeStaticListData?policeStaticListData.list: []}
      />
    </Modal>
    </div>
    );
  }
}

export default PoliceStaticList;
